<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbar_config"
      :mode="mode"
    />
    <Editor
      style="overflow-y: hidden;"
      :style="{ height: height + 'px' }"
      :defaultConfig="editor_config"
      :mode="mode"
      @onCreated="Created"
      @customPaste="Paste"
      @onChange="ContentChange"
      :key="key"
    />
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getCookie } from '../../utils/aqi'
export default {
  props: {
    height: {
      type: Number,
      default: 500
    }
  },
  data () {
    return {
      editor: undefined,
      key: Math.floor(Math.random() * 90000000) + 10000000,
      toolbar_config: {
        toolbarKeys: [
          'uploadImage',
          'bold',
          'underline',
          'italic',
          'through',
          'code',
          'sub',
          'sup',
          'clearStyle',
          'color',
          'bgColor',
          'fontSize',
          'indent',
          'delIndent',
          'justifyLeft',
          'justifyRight',
          'justifyCenter',
          'justifyJustify',
          'lineHeight',
          'divider',
          'blockquote',
          'headerSelect',
          'redo',
          'undo',
          'fullScreen',
          'bulletedList',
          'numberedList'
        ]
      },
      editor_config: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            server: '/api/cms/file/oss/upload/commonFile',
            maxFileSize: 5 * 1024 * 1024, // 单文件最大体积
            allowedFileTypes: ['image/*'],
            fieldName: 'file',
            meta: {
              directory: 'website/'
            },
            headers: {
              Authorization: getCookie('token').split('"')[1]
            },
            customInsert (res, insertFn) {
              insertFn(res.data.url)
            }
          }
        }
      },
      mode: 'default',
      timer: undefined
    }
  },
  components: {
    Editor,
    Toolbar
  },
  destroyed () {
    const editor = this.editor
    if (!editor) return
    editor.destroy()
  },
  methods: {
    // 粘贴文本
    Paste (editor, event) {
      const text = event?.clipboardData
        ? event.clipboardData.getData('text/plain')
        : ''
      // this.SetTextContent(text)
      event.preventDefault()
      return false
    },
    // 初始化init
    Created (editor) {
      // 一定要用 Object.seal() ，否则会报错
      this.editor = Object.seal(editor)
      this.$emit('Created')
    },
    // 监听内容变化
    ContentChange () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.$emit('OnChange', this.GetHtml())
      }, 300)
    },
    // 获取带格式的内容
    GetHtml () {
      this.IsError()
      const text = this.editor.getHtml() || ''
      return text
    },
    // 获取纯文本内容
    GetText () {
      this.IsError()
      const html = this.editor?.getText() || ''
      return html
    },
    // 清空内容
    ClearContent () {
      this.IsError()
      this.editor.clear()
    },
    /**
     * 设定会被解析的文本内容
     * @param {string} html 插入内容中的数据
     */
    SetPreContent (html) {
      this.IsError()
      this.editor.setHtml(html)
    },
    /**
     * 设定会被解析的纯文本内容
     * @param {string} text 插入内容中的数据
     */
    SetTextContent (text) {
      this.IsError()
      this.editor.insertText(text)
    },
    // 判断信息报错
    IsError () {
      const editor = this.editor
      if (!editor) {
        console.error(`${editor}为空, 初步判断是还未生成`)
        return false
      }
      return true
    },
    // 设置禁止使用
    SetDisabled () {
      this.IsError()
      const editor = this.editor
      editor.disable()
    }
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
